<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link tag="li" to="/goods">
          <li>商品</li>
        </router-link>
      </div>
      <div class="tab-item">
        <router-link tag="li" to="/ratings">
          <li>评论</li>
        </router-link>
      </div>
      <div class="tab-item">
        <router-link tag="li" to="/seller">
          <li>商家</li>
        </router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from './components/header/header.vue'

  const ERR_OK = 0
  export default {
    data() {
      return {
        seller: {}
      }
    },
    created() {
      this.$http.get('/api/seller').then((res) => {
        res = res.body
        if (res.errno === ERR_OK) {
          this.seller = res.data
        }
      })
    },
    components: {
      'v-header': header
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    border-1px()
    .tab-item
      flex: 1
      text-align: center
    .active
      color: rgb(240, 20, 20)
</style>
